import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { router, useLocalSearchParams } from 'expo-router';

// 模拟订单详情数据
const orderDetail = {
  id: '202403150001',
  status: 'pending',
  statusText: '待付款',
  timeLimit: '29:59',
  createTime: '2024-03-15 14:30:25',
  payMethod: '微信支付',
  logistics: {
    company: '顺丰速运',
    number: 'SF1234567890',
    status: '运输中',
    details: '【广州市】已离开广州分拨中心，发往北京分拨中心',
    address: {
      name: '张三',
      phone: '138****8888',
      full: '北京市朝阳区xxx街道xxx小区 1号楼1单元101室'
    }
  },
  product: {
    image: require('../../assets/product/p1.jpg'),
    title: 'MLB ENGAOE官方圆领卫衣男女情侣装春季新款宽松休闲重磅内搭上衣',
    specs: '白色/M',
    price: 199,
    quantity: 1
  },
  payment: {
    productTotal: 199,
    shipping: 0,
    discount: 20,
    total: 179
  }
};

export default function OrderDetailPage() {
  const insets = useSafeAreaInsets();
  const params = useLocalSearchParams();

  // 处理订单操作
  const handleOrderAction = (action: string) => {
    console.log('订单操作:', action);
  };

  return (
    <View className="flex-1 bg-gray-50" style={{ paddingTop: insets.top }}>
      {/* 顶部导航栏 */}
      <View className="bg-gray-50">
        <View className="h-11 px-4 flex-row items-center justify-between">
          <TouchableOpacity
            onPress={() => router.back()}
            className="w-8 h-8 items-center justify-center"
          >
            <Ionicons name="chevron-back" size={24} color="#333" />
          </TouchableOpacity>
          <Text className="text-base font-medium">订单详情</Text>
          <TouchableOpacity
            onPress={() => console.log('联系客服')}
            className="w-8 h-8 items-center justify-center"
          >
            <Ionicons name="headset-outline" size={24} color="#333" />
          </TouchableOpacity>
        </View>
      </View>

      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
        {/* 订单状态 */}
        <View className="bg-primary-500 p-5">
          <View className="flex-row items-center">
            <View className="w-12 h-12 bg-white/20 rounded-full items-center justify-center">
              <Ionicons name="time-outline" size={28} color="white" />
            </View>
            <View className="ml-4 flex-1">
              <Text className="text-white text-xl font-semibold">{orderDetail.statusText}</Text>
              {orderDetail.timeLimit && (
                <Text className="text-white/90 mt-1">
                  请在 {orderDetail.timeLimit} 内完成支付
                </Text>
              )}
            </View>
          </View>
        </View>

        {/* 物流信息 */}
        <View className="mx-4 mt-4 bg-white rounded-2xl shadow-sm">
          <View className="p-4">
            <View className="flex-row items-center justify-between mb-3">
              <Text className="text-base font-semibold text-gray-800">配送信息</Text>
              <TouchableOpacity 
                className="flex-row items-center"
                onPress={() => console.log('查看物流')}
              >
                <Text className="text-primary-500 mr-1">查看物流</Text>
                <Ionicons name="chevron-forward" size={16} color="#FF4785" />
              </TouchableOpacity>
            </View>
            <View className="flex-row items-center mb-2">
              <Ionicons name="location-outline" size={20} color="#666" />
              <View className="ml-2 flex-1">
                <View className="flex-row items-center">
                  <Text className="text-gray-800 font-medium">{orderDetail.logistics.address.name}</Text>
                  <Text className="text-gray-500 ml-4">{orderDetail.logistics.address.phone}</Text>
                </View>
                <Text className="text-gray-600 mt-1 leading-5">
                  {orderDetail.logistics.address.full}
                </Text>
              </View>
            </View>
          </View>
        </View>

        {/* 商品信息 */}
        <View className="mx-4 mt-4 bg-white rounded-2xl shadow-sm">
          <TouchableOpacity 
            className="p-4"
            activeOpacity={0.7}
            onPress={() => console.log('查看商品')}
          >
            <View className="flex-row">
              <Image
                source={orderDetail.product.image}
                className="w-24 h-24 rounded-xl"
                resizeMode="cover"
              />
              <View className="flex-1 ml-4 justify-between">
                <Text 
                  className="text-gray-800 text-base leading-5"
                  numberOfLines={2}
                >
                  {orderDetail.product.title}
                </Text>
                <View>
                  <Text className="text-gray-500 text-sm">
                    {orderDetail.product.specs}
                  </Text>
                  <View className="flex-row items-center justify-between mt-2">
                    <Text className="text-lg">
                      <Text className="text-gray-400 text-sm">¥</Text>
                      <Text className="text-gray-800 font-semibold">{orderDetail.product.price}</Text>
                    </Text>
                    <Text className="text-gray-500">x{orderDetail.product.quantity}</Text>
                  </View>
                </View>
              </View>
            </View>
          </TouchableOpacity>
        </View>

        {/* 支付信息 */}
        <View className="mx-4 mt-4 bg-white rounded-2xl shadow-sm">
          <View className="p-4">
            <Text className="text-base font-semibold text-gray-800 mb-4">支付信息</Text>
            <View className="space-y-3">
              <View className="flex-row justify-between">
                <Text className="text-gray-500">商品总价</Text>
                <Text className="text-gray-800">¥{orderDetail.payment.productTotal}</Text>
              </View>
              <View className="flex-row justify-between">
                <Text className="text-gray-500">运费</Text>
                <Text className="text-gray-800">¥{orderDetail.payment.shipping}</Text>
              </View>
              <View className="flex-row justify-between">
                <Text className="text-gray-500">优惠</Text>
                <Text className="text-red-500">-¥{orderDetail.payment.discount}</Text>
              </View>
              <View className="flex-row justify-between pt-3 border-t border-gray-100">
                <Text className="text-gray-800 font-medium">实付款</Text>
                <Text className="text-xl font-semibold text-primary-500">
                  ¥{orderDetail.payment.total}
                </Text>
              </View>
            </View>
          </View>
        </View>

        {/* 订单信息 */}
        <View className="mx-4 mt-4 mb-24 bg-white rounded-2xl shadow-sm">
          <View className="p-4">
            <Text className="text-base font-semibold text-gray-800 mb-4">订单信息</Text>
            <View className="space-y-3">
              <View className="flex-row justify-between">
                <Text className="text-gray-500">订单编号</Text>
                <View className="flex-row items-center">
                  <Text className="text-gray-800 mr-2">{orderDetail.id}</Text>
                  <TouchableOpacity
                    className="bg-gray-50 px-2 py-1 rounded-full"
                    onPress={() => console.log('复制订单号')}
                  >
                    <Text className="text-primary-500 text-sm">复制</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View className="flex-row justify-between">
                <Text className="text-gray-500">创建时间</Text>
                <Text className="text-gray-800">{orderDetail.createTime}</Text>
              </View>
              <View className="flex-row justify-between">
                <Text className="text-gray-500">支付方式</Text>
                <Text className="text-gray-800">{orderDetail.payMethod}</Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>

      {/* 底部操作栏 */}
      {orderDetail.status === 'pending' && (
        <View className="absolute bottom-0 left-0 right-0">
          <View className="bg-white px-4 pt-3 pb-8 shadow-lg">
            <View className="flex-row justify-end space-x-3">
              <TouchableOpacity
                className="mr-2 px-5 py-2.5 border border-gray-200 rounded-full"
                onPress={() => handleOrderAction('cancel')}
              >
                <Text className="text-gray-600">取消订单</Text>
              </TouchableOpacity>
              <TouchableOpacity
                className="px-5 py-2.5 bg-primary-500 rounded-full"
                onPress={() => handleOrderAction('pay')}
              >
                <Text className="text-white font-medium">立即付款</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )}
    </View>
  );
} 